<template>
  <div class="mapClick">
    <el-input ref="inputBox" v-model="address" size="small" @input="input" :placeholder="$attrs.placeholder"
      :show-word-limit="$attrs['show-word-limit']" :clearable="$attrs.clearable" :disabled="$attrs.disabled"
      :readonly="$attrs.readonly" :maxlength="$attrs.maxLength">
      <el-button type='primary' slot="append" icon="fa fa-map-marker" @click="openMap"></el-button>
    </el-input>
    <GetPosition ref="getPoint" @mapInfo="mapInfo" :address="address"></GetPosition>
  </div>
</template>
<script>
  import GetPosition from './getPosition.vue'
  export default {
    name: 'getMapPoint',
    components: {
      GetPosition
    },
    data() {
      return {
        address: '' //地址
      }
    },
    props: ['value'],
    watch: {
      value(val) {
        // if (val && val.includes('(')) { //值为地址（经度，维度）
        //   let strs = val.split('(')
        //   let points = strs[1].replace(')', '').split(',')
        //   this.lng = points[0]
        //   this.lat = points[1]
        //   this.address = strs[0]
        // } else {
          this.address = val
        // }
      }
    },
    created(){
      this.address = this.value
    },
    methods: {
      input(val) {
        this.$emit('input', val)
        this.$emit('change', val)
      },
      //打开地图选点弹窗
      openMap() {
        this.$refs.getPoint.init()
      },
      //获取高德地图的地址信息
      mapInfo(currentAddress) {
        this.address = currentAddress
        this.$emit('input', currentAddress)
        this.$emit('change', currentAddress)
      }
    }
  }
</script>
<style lang='scss'>
  .mapClick {
    .el-dialog__body {
      padding-top: 5px;
      padding-bottom: 5px;
    }
  }
</style>
